<template>

    <div class="apply-content">
        <el-form :model="form" ref="formRef" label-width="120px" class="form-container">
            <!-- 基础信息部分 -->
            <div class="section">
                <div class="section-header">
                    <div class="mark"></div>
                    <div class="title">基础信息</div>
                </div>
                <div class="section-content">
                    <el-form-item label="服务名称" prop="serviceName" :rules="serviceNameRules">
                        <el-input v-model="form.serviceName" placeholder="请输入服务名称"></el-input>
                    </el-form-item>
                    <el-form-item label="别名" prop="alias">
                        <el-input v-model="form.alias" placeholder="请输入别名"></el-input>
                    </el-form-item>
                    <el-form-item label="描述" prop="remark">
                        <el-input v-model="form.remark" type="textarea" :rows="3" placeholder="请输入描述"></el-input>
                    </el-form-item>
                    <el-form-item label="源码包" prop="sourceCode">
                        <el-upload class="upload-demo" action="#" :auto-upload="false">
                            <template #trigger>
                                <el-button type="primary">选择文件</el-button>
                            </template>
                            <el-button class="ml-3" type="success">上传源码</el-button>
                            <template #tip>
                                <div class="el-upload__tip">仅支持 .zip/.tar.gz 格式文件</div>
                            </template>
                        </el-upload>
                    </el-form-item>
                </div>
            </div>

            <!-- 配置部分 -->
            <div class="section">
                <div class="section-header">
                    <div class="mark"></div>
                    <div class="title">配置</div>
                </div>
                <div class="section-content">
                    <el-row :gutter="20">
                        <el-col :span="12">
                            <el-form-item label="CPU上限" prop="cpuLimit">
                                <el-input-number v-model="form.cpuLimit" :min="0" :precision="1"
                                    :step="0.5"></el-input-number>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="内存上限" prop="memoryLimit">
                                <el-input-number v-model="form.memoryLimit" :min="0" :step="256"></el-input-number>
                            </el-form-item>
                        </el-col>
                    </el-row>

                    <el-form-item label="端口" prop="port">
                        <el-input v-model="form.port" placeholder="请输入端口号"></el-input>
                    </el-form-item>

                    <!-- 环境变量部分 -->
                    <el-form-item label="环境变量" prop="envVars">
                        <div v-for="(env, index) in form.envVars" :key="index" class="env-var-item">
                            <el-row :gutter="20">
                                <el-col :span="10">
                                    <el-input v-model="env.key" placeholder="Key"></el-input>
                                </el-col>
                                <el-col :span="10">
                                    <el-input v-model="env.value" placeholder="Value"></el-input>
                                </el-col>
                                <el-col :span="4">
                                    <el-button type="danger" @click="removeEnvVar(index)">删除</el-button>
                                </el-col>
                            </el-row>
                        </div>
                        <el-button type="primary" @click="addEnvVar">添加环境变量</el-button>
                    </el-form-item>

                    <!-- 存储部分 -->
                    <el-form-item label="存储" prop="storage">
                        <el-tabs type="border-card" class="storage-tabs" v-model="tabValue">
                            <el-tab-pane label="持久卷">
                                <div class="volume-content">
                                    <el-form-item label="卷名称">
                                        <el-input v-model="form.persistentVolume.name" placeholder="请输入卷名称"></el-input>
                                    </el-form-item>
                                    <el-form-item label="容量">
                                        <el-input-number v-model="form.persistentVolume.size" :min="1"
                                            :step="1"></el-input-number>
                                    </el-form-item>
                                </div>
                            </el-tab-pane>
                            <el-tab-pane label="临时卷">
                                <div class="volume-content">
                                    <el-form-item label="卷名称">
                                        <el-input v-model="form.temporaryVolume.name" placeholder="请输入卷名称"></el-input>
                                    </el-form-item>
                                </div>
                            </el-tab-pane>
                            <el-tab-pane label="HostPath卷">
                                <div class="volume-content">
                                    <el-form-item label="卷名称">
                                        <el-input v-model="form.hostPathVolume.name" placeholder="请输入卷名称"></el-input>
                                    </el-form-item>
                                    <el-form-item label="主机路径">
                                        <el-input v-model="form.hostPathVolume.path" placeholder="请输入主机路径"></el-input>
                                    </el-form-item>
                                </div>
                            </el-tab-pane>
                        </el-tabs>
                    </el-form-item>
                </div>
            </div>

            <div class="form-footer">
                <el-button type="primary" @click="submitForm">提交</el-button>
                <el-button @click="resetForm">重置</el-button>
            </div>
        </el-form>
    </div>

</template>

<script setup>
import { ref } from 'vue';

// 表单数据模型
const form = ref({
    serviceName: '',
    alias: '',
    remark: '',
    cpuLimit: 1,
    memoryLimit: 512,
    port: '',
    envVars: [],
    persistentVolume: {
        name: '',
        size: 1
    },
    temporaryVolume: {
        name: ''
    },
    hostPathVolume: {
        name: '',
        path: ''
    }
});

const tabValue = ref("持久卷");

// 环境变量操作
const addEnvVar = () => {
    form.value.envVars.push({ key: '', value: '' });
};

const removeEnvVar = (index) => {
    form.value.envVars.splice(index, 1);
};

// 表单验证规则
const serviceNameRules = [
    { required: true, message: '服务名称为必填项', trigger: 'blur' },
];
// 表单实例
const formRef = ref(null);

// 提交表单
const submitForm = async () => {
    try {
        await formRef.value?.validate();
        // 表单验证通过后，可以处理提交逻辑
        console.log('提交数据:', form.value);
    } catch (error) {
        console.log('表单验证失败:', error);
    }
};
// 重置表单
const resetForm = () => {
    formRef.value?.resetFields();
};
</script>
<style lang="scss" scoped>


.apply-content {
    width: 80%;
    margin: 0 auto;
    padding: 20px;
}

.section {
    margin-bottom: 30px;
    background: #fff;
    border-radius: 4px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);

    .section-header {
        display: flex;
        align-items: center;
        padding: 15px 20px;
        border-bottom: 1px solid #EBEEF5;

        .mark {
            width: 4px;
            height: 16px;
            background: #409EFF;
            margin-right: 10px;
            border-radius: 2px;
        }

        .title {
            font-size: 16px;
            font-weight: 600;
            color: #303133;
        }
    }

    .section-content {
        padding: 20px;
    }
}

.env-var-item {
    margin-bottom: 10px;
}

.storage-tabs {
    .volume-content {
        padding: 20px;
    }
}

.form-footer {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-top: 30px;
}

.upload-demo {
    :deep(.el-upload__tip) {
        color: #909399;
        font-size: 12px;
        margin-top: 8px;
    }
}
</style>
